<script>
import { mergePagingArguments } from "./utils";
export default {
    name: "MoTable",
    props: {
        /**
         * table 数据列表
         * [注意] 如果data 存在 则优先级高于下面 attrs 中的 data
         * example:
         * # component:
         *  <MoTable :data="tabelData" />
         * # data
         *  data() {
         *    return {
         *       tabelData: [
         *              {
         *                  date: "2016-05-02",
         *                  name: "王小虎",
         *                  address: "上海市普陀区金沙江路 1518 弄"
         *              },
         *              {
         *                  date: "2016-05-04",
         *                  name: "王小虎",
         *                  address: "上海市普陀区金沙江路 1517 弄"
         *              }
         *          ]
         *      },
         *  }
         */
        data: Array,
        /**
         * table Attributes 属性
         * https://element.eleme.cn/#/zh-CN/component/table#table-attributes
         * 支持上述链接中的所有属性
         * [注意] 如果上面data 存在 则优先级高于arrts中的data，会被上面data覆盖
         * example:
         * # component:
         *  <MoTable :attrs="tableAttrs" />
         * # data
         *  data() {
         *    return {
         *       tableAttrs: {
         *          stripe: true,
         *          border: true,
         *          "show-header": true,
         *          data: [
         *              {
         *                  date: "2020-03-27",
         *                  name: "老村长",
         *                  address: "四川省成都市青羊区人民中路一段16号"
         *              },
         *              {
         *                  date: "2020-03-27",
         *                  name: "老村长",
         *                  address: "四川省成都市青羊区人民中路一段16号"
         *              }
         *          ]
         *      },
         *  }
         */
        attrs: Object,
        /**
         * table events 事件
         * https://element.eleme.cn/#/zh-CN/component/table#table-events
         * 支持上述链接中的所有属性
         * 参数同上述链接中的参数相同
         * example:
         * # component:
         *  <MoTable :events="tableEvents" />
         * # data
         *  data() {
         *    return {
         *       tableEvents: {
         *           "row-click": (row, column, event) => {
         *               console.log(row);
         *               console.log(column);
         *               console.log(event);
         *           }
         *       }
         *  }
         */
        events: Object,
        /**
         * table 列配置
         * [注意] Scoped Slot 通过 scopedSlots 属性指定
         * https://element.eleme.cn/#/zh-CN/component/table#table-column-attributes
         * 支持上述链接的所有参数
         * example:
         * # component:
         *  <MoTable :cols="cols" />
         * # data
         *  data() {
         *    return {
         *       cols: [
         *          { prop: "date", label: "日期", width: "180" },
         *          { prop: "name", label: "姓名", width: "180" },
         *          { prop: "address", label: "地址" },
         *          {
         *              label: "操作",
         *              scopedSlots: {
         *                  default: scoped => {
         *                      return (
         *                          <el-button
         *                              onClick={() => this.handlerEditor(scoped.row)}
         *                              type="primary"
         *                              plain
         *                              size="small"
         *                              icon="el-icon-edit"
         *                          >
         *                              Editor
         *                          </el-button>
         *                      );
         *                  }
         *              }
         *          }
         *        ]
         *     },
         *  },
         *  methods: {
         *      handlerEditor(row) {
         *          console.log(row)
         *      }
         * }
         */
        cols: {
            type: Array,
            default: () => []
        },
        /**
         * 分页器参数 不传则不显示
         * https://element.eleme.cn/#/zh-CN/component/pagination#attributes
         * 支持上面链接中的所有参数，带中划线参数转为驼峰命名page-count  => pageCount
         * 除了上面参数之外添加新的参数：[align] 对齐方式 'left', 'center', 'right'
         */
        paging: {
            type: Object,
            default: () => {}
        },
        /**
         * 分页器事件
         * https://element.eleme.cn/#/zh-CN/component/pagination#events
         * 支持上面链接中的所有事件，带中划线事件名转为驼峰命名 current-change  => currentChange
         */
        pagingEvents: {
            type: Object,
            default: () => {}
        }
    },
    computed: {
        localPaging() {
            if (this.paging) {
                return mergePagingArguments(this.paging, "attrs");
            }
            return undefined;
        },
        localPagingEvents() {
            if (this.pagingEvents) {
                return mergePagingArguments(this.pagingEvents, "events");
            }
            return {};
        }
    },
    render() {
        // 直属 data 优先级高于 attrs中的data的原因
        ////
        // 如果存在直属data 和attrs 中的data同时存在 => 删除attrs中的data
        if (this.data && this.attrs.data) {
            delete this.attrs.data;
        }
        return (
            <div class="mo_table">
                {/* table */}
                <el-table
                    data={this.data}
                    {...{ attrs: this.attrs }}
                    {...{ on: this.events }}
                >
                    {/* table 列 */}
                    {this.cols.map((col, index) => {
                        const { scopedSlots } = col;
                        return (
                            <el-table-column
                                key={index}
                                {...{ attrs: col }}
                                scopedSlots={scopedSlots}
                            />
                        );
                    })}
                </el-table>
                {/* 分页器 不传入 paging prop 则不显示 */}
                {this.localPaging ? (
                    <el-pagination
                        {...{ attrs: this.localPaging }}
                        {...{ on: this.localPagingEvents }}
                    />
                ) : null}
            </div>
        );
    }
};
</script>
<style scope>
.mo_table > .el-pagination,
.mo_table > .el-table {
    margin-bottom: 1rem;
}
</style>